<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>'v-model' 双向绑定</title>
    <script src="../lib/vue-2.6.12.js"></script>
</head>
<body>
   <div id="app">
       <div>用户名: {{msg}}</div>
       <div>
           <!-- 使用model指令进行数据的双向绑定 -->
           <!-- value会改变msg的值,msg也会改变model -->
           <input type="text" v-model="msg">
           <hr>
           <!-- 单向绑定-->
           <input type="text" :value="msg">
           <hr>
           <!-- 下拉菜单的双向绑定 -->
           <select v-model="city">
               <option value="">请选择</option>
               <option value="1">江西</option>
               <option value="2">四川</option>
               <option value="3">上海</option>
               <option value="4">北京</option>
           </select>

       </div>
   </div>

  <script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '请输入用户名',
            city: '',
        },
        methods: {

        },
    });
  </script>
</body>
</html>